<template>
	<view class="container">
		<!-- <topLogo></topLogo> -->
		<view class="list-container">
			<view class="order-tit">
				<view class="">
					积分明细
				</view>
			</view>
			<view class="list-div">
				<view class="list" v-for="(item, index) in list" :key="index">
					<view class="list-1">
						{{ item.showTitle }}
					</view>
					<view class="list-2">
						{{ item.createTime.split(" ")[0]}}
					</view>
					<view class="list-3">
						积分：<text class="blue">{{ item.integral>0?'+'+item.integral:item.integral }}</text>
					</view>
					<view class="list-4">
						累计：<text class="blue">{{ item.ljIntegral }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	// import uDatetimePicker from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue'
	export default {
		data() {
			return {
				range: [],
				pageNum: 1,
				pageSize: 1000,
				orderByColumn: "createTime",
				isAsc: "desc",
				total: 0,
				list: [],
				loading: false,
				userCenterData: {
					user: {
						allScore: 0,
						useScore: 0
					}
				},
			}
		},
		onLoad() {},
		onShow() {
			this.getScoreDetail()
			this.getUserInfo()
		},
		methods: {
			async getUserInfo() {
				this.$public.htmlPost("/api/getUserInfo").then((res) => {
					let data = res.data
					if (data.code == 0) {
						this.userCenterData.user = data.data
					}
				})
			},
			getScoreDetail() {
				let startTime = '',
					endTime = ''
				if (this.range.length > 1) {
					startTime = this.range[0]
					endTime = this.range[1]
				}
				this.$public.htmlPost("/api/getScoreDetail", {
					startTime: startTime,
					endTime: endTime,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					orderByColumn: this.orderByColumn,
					isAsc: this.isAsc
				}).then((res) => {
					console.log("积分明细接口", res)
					// res.data.data.rows.forEach(item => {
					// 	let text = ""
					// 	text += item.title + ' '
					// 	text += this.dateFormat(item.createTime) + ' '
					// 	text += item.integral > 0 ? '积分：+' + item.integral : '积分：' + item.integral
					// 	item.showText = text
					// })
					this.list = res.data.data.rows
					this.total = res.data.data.total
				})
			},
			pageChange(e) {
				console.log("e", e)
				this.pageNum = e.current
				this.getScoreDetail()
			},
			changeTime(time) {
				console.log("time", time)
				this.range = time
				this.getScoreDetail()
			},
			dateFormat(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				// return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
				return year + "-" + month + "-" + day + "- " + hours + ":" + minutes;
			},
		}
	}
</script>
<style lang='scss' scoped>
	.container {
		background: #f8f8f8;
		height: 93vh;
		padding: 40rpx 30rpx;
	}


	.cover-container {
		background: #fff;
		/* margin-top: -100upx; */
		/* padding: 0 30upx; */
		position: relative;
		/* padding-bottom: 20upx; */
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		padding: 0 25rpx;

		.top {
			display: flex;
			justify-content: space-between;
			text-align: center;

			border-bottom: $uni-wl-bottom-border;
		}

		.top-l {
			height: 180rpx;
			display: flex;
			/* align-items: center; */
			flex-direction: column;
			justify-content: center;
		}

		.top-l-s {
			font-size: 30rpx;
			color: #333;
		}

		.top-l-x {
			font-size: 36rpx;
			color: #0f8eee;
			margin-top: 25rpx;
		}

		.xia {
			display: flex;
			justify-content: space-between;
			height: 108rpx;
			align-items: center;
			font-size: 30rpx;
			color: #333;
		}
	}

	.list-container {
		padding: 30rpx;
		background: #fff;
		margin-top: 30rpx;

		.order-tit {
			margin-bottom: 20rpx;
			font-size: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #333;

			.mx {
				font-size: 24rpx;
			}
		}

		.list-div {
			.list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 85rpx;
				border-bottom: $uni-wl-bottom-border;
				font-size: 24rpx;

				.list-1 {
					width: 200rpx;
					overflow: hidden;
					display: inline-block;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 26rpx;
				}

				.list-2.list-3 {
					width: 150rpx;
				}

				.blue {
					color: #0f8eee;
				}
			}
		}

	}
</style>